{% extends "base.html" %}

{% block title %}用户设置 - 交易监控系统{% endblock %}

{% block extra_js %}
<script>
// 密码显示切换功能
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded');
    const toggleButtons = document.querySelectorAll('.toggle-password');
    console.log('Found toggle buttons:', toggleButtons.length);
    toggleButtons.forEach(button => {
        button.addEventListener('click', function() {
            console.log('Toggle button clicked');
            const targetId = this.getAttribute('data-target');
            const passwordInput = document.getElementById(targetId);
            console.log('Target input:', passwordInput);
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            // 切换眼睛图标
            const icon = this.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });
    });
});
</script>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h2>用户设置</h2>
                </div>
                <div class="card-body">
                    {% if error %}
                    <div class="alert alert-danger" role="alert">
                        {{ error }}
                    </div>
                    {% endif %}
                    
                    {% if success %}
                    <div class="alert alert-success" role="alert">
                        设置已成功更新！
                    </div>
                    {% endif %}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5>修改密码</h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="/user/change_password">
                                        <div class="form-group mb-3">
                            <label for="current_password" class="fw-bold">当前密码</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="current_password" name="current_password" required value="">
                                    <button class="btn btn-outline-secondary toggle-password" type="button" data-target="current_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                            </div>
                        </div>
                                        <div class="form-group mb-3">
                            <label for="new_password" class="fw-bold">新密码</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="new_password" name="new_password" required>
                                <button class="btn btn-outline-secondary toggle-password" type="button" data-target="new_password">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <small class="form-text text-muted">密码长度至少6个字符</small>
                        </div>
                                        <div class="form-group mb-3">
                            <label for="confirm_password" class="fw-bold">确认新密码</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                                <button class="btn btn-outline-secondary toggle-password" type="button" data-target="confirm_password">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                                        <button type="submit" class="btn btn-primary">更新密码</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>会话设置</h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="/user/update_session_duration">
                                        <div class="form-group mb-3">
                                            <label for="session_duration" class="fw-bold">登录会话时长（分钟）</label>
                                            <input type="number" class="form-control" id="session_duration" name="session_duration" 
                                                   value="{{ user.session_duration }}" min="10" max="1440" required>
                                            <small class="form-text text-muted">设置登录状态保持的时间（10分钟到24小时）</small>
                                        </div>
                                        <button type="submit" class="btn btn-primary">更新设置</button>
                                    </form>
                                </div>
                            </div>
                            
                            <div class="card mt-4">
                                <div class="card-header">
                                    <h5>账户信息</h5>
                                </div>
                                <div class="card-body">
                                    <p><strong>用户名:</strong> {{ user.username }}</p>
                                    <p><strong>账户类型:</strong> {% if user.is_admin %}管理员{% else %}普通用户{% endif %}</p>
                                    <p><strong>上次登录:</strong> {{ user.last_login.strftime('%Y-%m-%d %H:%M:%S') if user.last_login else '首次登录' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}